<template>
  <div>
    <el-select v-model="params.siteId" clearable placeholder="请选择站点">
      <el-option v-for="item in siteList" :key="item.siteId" :label="item.siteName" :value="item.siteId"/>
    </el-select>
    <el-input class="el-input" placeholder="请输入别名" v-model="params.pageAliase"  clearable/>
    <el-button type="primary" @click="clickQuery" icon="el-icon-search" size="small">查询</el-button>
    <el-table :data="list" stripe style="width: 100%">
      <el-table-column type="index"/>
      <el-table-column prop="pageName" label="页面名称"/>
      <el-table-column prop="pageAliase" label="别名"/>
      <el-table-column prop="pageType" label="页面类型"/>
      <el-table-column prop="pageWebPath" label="访问路径"/>
      <el-table-column prop="pagePhysicalPath" label="物理路径"/>
      <el-table-column prop="pageCreateTime" label="创建时间"/>
    </el-table>
    <!--  分页组件    -->
    <el-pagination class="el-pagination"  onselectstart="return false;" background layout="prev, pager, next"
                   :total="total" :page-size="params.size" :current-page="params.page"
                   hide-on-single-page @current-change="changePage"/>
  </div>
</template>

<script>
// 导入一个文件中的方法
import * as cmsApi from '../api/cms'
// 导入site中的方法
import * as siteApi from '../../site/api/site'

export default {
  data () {
    return {
      list: [], // 表格显示的数据
      total: 0, // 总的条数
      params: { // 分页参数
        page: 1, // :current-page 当前选中的页数
        size: 10, // :page-size 每页显示的页数
        siteId: '', // 用来存放用户选中的下拉站点id
        pageAliase: '' // 用来存放用户输入的站点别名
      },
      siteList: '' // 站点列表, 请求后端获取
    }
  },
  methods: {
    // 查询站点信息,填充站点选择下拉列表
    queryCmsSite () {
      siteApi.SiteList().then(response => {
        this.siteList = response.queryResult.list
      })
    },
    // 当前模块查询数据列表的方法
    query () {
      // 调用../api/cms.js中的方法查询数据
      cmsApi.pageList(this.params.page, this.params.size, {
        siteId: this.params.siteId,
        pageAliase: this.params.pageAliase
      }).then((response) => {
        this.list = response.queryResult.list
        this.total = response.queryResult.total
      })
    },
    // 当分页上面的页数点击时触发的事件 @current-change="changePage" val默认传入的是当前页码
    changePage (val) {
      this.params.page = val
      this.query()
    },
    // 当查询按钮被点击,需要重置当前页数,
    clickQuery () {
      this.params.page = 1
      this.params.size = 10
      this.query()
    }
  },
  // 初始化页面查询数据
  mounted () {
    this.query() // 查询列表中的数据
    this.queryCmsSite() // 查询下拉列表中的数据
  }
}
</script>

<style>
  .el-pagination {
    float: right;
  }
  .el-input {
    width: auto;
  }
</style>
